<script lang="ts" setup>
// Define props based on the FluentUI AccordionItem component
withDefaults(
  defineProps<{
    block?: boolean;
    disabled?: boolean;
    expanded?: boolean;
    headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
    id?: string;
    markerPosition?: 'end' | 'start';
    size?: 'extra-large' | 'large' | 'medium' | 'small';
  }>(),
  {
    expanded: false,
    disabled: false,
    headingLevel: 2,
    size: undefined,
    markerPosition: undefined,
    block: false,
    id: undefined,
  },
);

const emit = defineEmits<{
  click: [event: Event];
}>();

const handleClick = (event: Event) => {
  emit('click', event);
};
</script>

<template>
  <fluent-accordion-item
    :expanded="expanded"
    :disabled="disabled"
    :heading-level="headingLevel"
    :size="size"
    :marker-position="markerPosition"
    :block="block"
    :id="id"
    @click="handleClick"
  >
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="start">
      <slot name="start"></slot>
    </span>
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="heading">
      <slot name="heading"></slot>
    </span>
    <slot></slot>
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="marker-expanded">
      <slot name="marker-expanded"></slot>
    </span>
    <!-- eslint-disable-next-line vue/no-deprecated-slot-attribute -->
    <span slot="marker-collapsed">
      <slot name="marker-collapsed"></slot>
    </span>
  </fluent-accordion-item>
</template>

<style scoped></style>
